<template>
  <div class="circle-ring-chart" ref="chartContainer"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'CircleRingChart',
  props: {},
  data() {
    return {
      chart: null,
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
    window.addEventListener('resize', this.resizeChart);
  },
  beforeDestroy() {
    if (this.chart) {
      this.chart.dispose();
    }
    window.removeEventListener('resize', this.resizeChart);
  },
  methods: {
    initChart() {
      // 确保容器已经挂载
      if (!this.$refs.chartContainer) return;

      // 初始化图表
      this.chart = echarts.init(this.$refs.chartContainer);
      this.updateChart();
    },

    resizeChart() {
      if (this.chart) {
        this.chart.resize();
      }
    },

    updateChart() {
      if (!this.chart) return;
      // 绘制左侧面
      const CubeLeft = echarts.graphic.extendShape({
        shape: {
          x: 0,
          y: 0,
        },
        buildPath: function (ctx, shape) {
          // 会canvas的应该都能看得懂，shape是从custom传入的
          const xAxisPoint = shape.xAxisPoint;
          const c0 = [shape.x, shape.y];
          const c1 = [shape.x - 14, shape.y - 14];
          const c2 = [xAxisPoint[0] - 14, xAxisPoint[1] - 14];
          const c3 = [xAxisPoint[0], xAxisPoint[1]];
          ctx
            .moveTo(c0[0], c0[1])
            .lineTo(c1[0], c1[1])
            .lineTo(c2[0], c2[1])
            .lineTo(c3[0], c3[1])
            .closePath();
        },
      });
      // 绘制右侧面
      const CubeRight = echarts.graphic.extendShape({
        shape: {
          x: 0,
          y: 0,
        },
        buildPath: function (ctx, shape) {
          const xAxisPoint = shape.xAxisPoint;
          const c1 = [shape.x, shape.y];
          const c2 = [xAxisPoint[0], xAxisPoint[1]];
          const c3 = [xAxisPoint[0] + 16, xAxisPoint[1] - 8];
          const c4 = [shape.x + 16, shape.y - 8];
          ctx
            .moveTo(c1[0], c1[1])
            .lineTo(c2[0], c2[1])
            .lineTo(c3[0], c3[1])
            .lineTo(c4[0], c4[1])
            .closePath();
        },
      });
      // 绘制顶面
      const CubeTop = echarts.graphic.extendShape({
        shape: {
          x: 0,
          y: 0,
        },
        buildPath: function (ctx, shape) {
          const c1 = [shape.x, shape.y];
          const c2 = [shape.x + 16, shape.y - 8];
          const c3 = [shape.x + 3, shape.y - 20];
          const c4 = [shape.x - 14, shape.y - 14];
          ctx
            .moveTo(c1[0], c1[1])
            .lineTo(c2[0], c2[1])
            .lineTo(c3[0], c3[1])
            .lineTo(c4[0], c4[1])
            .closePath();
        },
      });
      // 注册三个面图形
      echarts.graphic.registerShape('CubeLeft', CubeLeft);
      echarts.graphic.registerShape('CubeRight', CubeRight);
      echarts.graphic.registerShape('CubeTop', CubeTop);

      let timer = null;
      let xAxisData = [
        '03-01',
        '03-02',
        '03-03',
        '03-04',
        '03-05',
        '03-06',
        '03-07',
      ];
      let max = [800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800];
      let seriesData = [120, 330, 260, 700, 401, 500];

      // 配置项
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
          formatter: function (params, ticket, callback) {
            const item = params[1];
            return item.name + ' : ' + item.value;
          },
        },
        dataZoom: [
          {
            type: 'slider',
            show: false,
            realtime: true,
            startValue: 0,
            endValue: 5, // 初始显示index0-6的数据,可根据你的数据量设置
            filterMode: 'none',
          },
        ],
        grid: {
          left: '1%',
          right: '1%',
          bottom: '1%',
          top: 10,
          containLabel: true,
        },
        xAxis: {
          type: 'category',
          data: xAxisData,
          axisLine: {
            show: true,
            lineStyle: {
              color: 'rgba(29, 185, 255,0.4)',
            },
          },
          axisTick: {
            show: false,
            length: 9,
            alignWithLabel: true,
            lineStyle: {
              color: '#7DFFFD',
            },
          },
          axisLabel: {
            //坐标轴字体颜色
            textStyle: {
              color: '#9eaaba',
            },
          },
        },
        yAxis: {
          min: 0,
          max: 1000,
          show: false,
          interval: 200,
          type: 'value',
          axisLine: {
            show: false,
            lineStyle: {
              color: 'white',
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: 'rgba(255,255,255,0.1)',
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            //坐标轴字体颜色
            textStyle: {
              color: '#9eaaba',
            },
          },
          boundaryGap: ['20%', '20%'],
        },
        series: [
          {
            type: 'custom',
            renderItem: function (params, api) {
              const location = api.coord([api.value(0), api.value(1)]);

              return {
                type: 'group',
                children: [
                  {
                    type: 'CubeLeft',
                    shape: {
                      api,
                      x: location[0],
                      y: location[1],
                      xAxisPoint: api.coord([api.value(0), 0]),
                    },
                    style: {
                      fill: 'rgba(27, 131, 187, 0.1)', // 修改透明度为 0.1
                    },
                  },
                  {
                    type: 'CubeRight',
                    shape: {
                      api,
                      x: location[0],
                      y: location[1],
                      xAxisPoint: api.coord([api.value(0), 0]),
                    },
                    style: {
                      fill: 'rgba(27, 131, 187, 0.08)', // 修改透明度为 0.08
                    },
                  },
                  {
                    type: 'CubeTop',
                    shape: {
                      api,
                      x: location[0],
                      y: location[1],
                      xAxisPoint: api.coord([api.value(0), 0]),
                    },
                    style: {
                      fill: 'rgba(23, 121, 181, 0.12)', // 修改透明度为 0.12
                    },
                  },
                ],
              };
            },
            data: max,
          },
          {
            type: 'custom',
            renderItem: (params, api) => {
              const location = api.coord([api.value(0), api.value(1)]);
              const value = api.value(1); // 获取当前数据值
              var color =
                api.value(1) > 10000
                  ? 'red'
                  : new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      {
                        offset: 0,
                        color: '#5cc4eb',
                      },
                      {
                        offset: 0.8,
                        color: '#21658c',
                      },
                    ]);
              return {
                type: 'group',
                children: [
                  {
                    type: 'CubeLeft',
                    shape: {
                      api,
                      xValue: api.value(0),
                      yValue: api.value(1),
                      x: location[0],
                      y: location[1],
                      xAxisPoint: api.coord([api.value(0), 0]),
                    },
                    style: {
                      fill: (color =
                        api.value(1) > 10000
                          ? 'red'
                          : new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                              {
                                offset: 0,
                                color: '#5cc4eb',
                              },
                              {
                                offset: 0.8,
                                color: '#21658c',
                              },
                            ])),
                    },
                  },
                  {
                    type: 'CubeRight',
                    shape: {
                      api,
                      xValue: api.value(0),
                      yValue: api.value(1),
                      x: location[0],
                      y: location[1],
                      xAxisPoint: api.coord([api.value(0), 0]),
                    },
                    style: {
                      fill: (color =
                        api.value(1) > 10000
                          ? 'red'
                          : new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                              {
                                offset: 0,
                                color: '#048fd4',
                              },
                              {
                                offset: 0.8,
                                color: '#195684',
                              },
                            ])),
                    },
                  },
                  {
                    type: 'CubeTop',
                    shape: {
                      api,
                      xValue: api.value(0),
                      yValue: api.value(1),
                      x: location[0],
                      y: location[1],
                      xAxisPoint: api.coord([api.value(0), 0]),
                    },
                    style: {
                      fill: (color =
                        api.value(1) > 10000
                          ? 'red'
                          : new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                              {
                                offset: 0,
                                color: '#65c7ec',
                              },
                              {
                                offset: 1,
                                color: '#65c7ec',
                              },
                            ])),
                    },
                  },
                  {
                    type: 'text',
                    style: {
                      text: value, // 显示实际值
                      textFont: 'bold 14px Arial', // 添加 bold 使文字加粗
                      fill: 'rgba(0, 180, 255, 1)',
                      textAlign: 'center',
                      textBaseline: 'bottom',
                      textShadowColor: 'rgba(0, 0, 0, 0.5)',
                      textShadowBlur: 2,
                      fontWeight: 'bold', // 再次确保文字加粗
                    },
                    position: [location[0], location[1] - 35], // 将 -25 改为 -35，使文字位置更高
                  },
                ],
              };
            },

            data: seriesData,
          },
          {
            type: 'bar',
            itemStyle: {
              color: 'transparent',
            },
            tooltip: {},
            data: max,
          },
        ],
      };

      this.chart.setOption(option);
    },
  },
  watch: {
    value: {
      handler: 'updateChart',
      immediate: false,
    },
  },
};
</script>

<style lang="less" scoped>
.circle-ring-chart {
  width: 95%;
  height: 1.1979rem;
  position: relative;
}
</style>
